import React, { FC } from "react";
import useGetComponentInfo_redux from "../../../hooks/useGetComponentInfo_redux";
import { getComponentConfigByType, ComponentValueType } from "../../../questionComponents";
import { changeComponentProps } from "../../../store/componentReducer";
import { useDispatch } from "react-redux";
const NoProp: FC = () => {
  return <div style={{ textAlign: "center" }}>未选中组件</div>;
};
const PropComponent: FC = () => {
  const dispatch = useDispatch();
  const { selectedComponent } = useGetComponentInfo_redux();
  if (selectedComponent == null) return <NoProp></NoProp>;
  const { type, props, islock } = selectedComponent;
  const componentConfig = getComponentConfigByType(type);
  if (componentConfig == null) return <NoProp></NoProp>;

  function changeProps(newProps: ComponentValueType) {
    if (selectedComponent == null) return;
    const { fe_id } = selectedComponent;
    dispatch(changeComponentProps({ fe_id, newProps }));
  }

  const { PropsComponent } = componentConfig;
  return <PropsComponent {...props} onchange={changeProps} disabled={islock}></PropsComponent>;
};

export default PropComponent;
